<template>
    <Echart
    :options="options"
    :id="id"
    height="2.2rem"
    width="100%"
    >
  </Echart>
</template>

<script>
import Echart from '@/common/echart'
import {nowSize} from '@/utils'
export default {
  name: 'chart',
  components:{
      Echart
  },
  data() {
      return {
         options:{} 
      }
  },
  computed:{
  
  },
  props:{
      cdata:{
        type: Object,
       default: () => ({}),
      },
      id:String
  },
  watch:{
      cdata:{
          handler(newData){
          const dataArr = newData.percent;
          const dataX = 100;
        //   const height1 = { value: 80};
          this.options = {
           title: [
                {
                    text: '{val|' + dataArr + '}\n{name|  ' + newData.name + '}{unit|（' + '%' + '）}',
                    bottom: '10%',
                    left: 'center',
                    textStyle: {
                        rich: {
                            val: {
                                fontSize: nowSize(18),
                                color: '#bde4ff',
                                padding: [10, 0],
                            },
                            name: {
                                fontSize: nowSize(17),
                                color: '#bde4ff',
                            },
                            unit: {
                                fontSize:nowSize(17),
                                color: '#DCCC5F',
                            },
                        },
                    },
                    triggerEvent: true,
                },
            ],

            legend: {
                show: false,
            },
            series: [
                {
                    name: '最外部进度条',
                    type: 'gauge',
                    radius: '92%',
                    splitNumber: 14,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    1,
                                    {
                                        type: 'linear',
                                        x: 0,
                                        y: 1,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#032347', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#0B8BAA', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: '#03FCF3', // 100% 处的颜色
                                            },
                                        ],
                                        global: false, // 缺省为 false
                                    },
                                ],
                            ],
                            width: 10,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        length: 30,
                        lineStyle: {
                            color: '#031f45',
                            width: 2,
                        },
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    title: {
                        // 标题
                        show: false,
                    },
                    data: [
                        {
                            name: 'title',
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
                {
                    name: '外二红线',
                    type: 'gauge',
                    radius: '85%',
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / dataX, '#031f45'],
                                [1, '#B74443'],
                            ],
                            width: 4,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    title: {
                        // 标题
                        show: false,
                    },
                    data: [
                        {
                            name: 'title',
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
                {
                    name: '刻度尺',
                    type: 'gauge',
                    radius: '81%',
                    splitNumber: 10, // 刻度数量
                    min: 0, // 最小刻度
                    max: dataX, // 最大刻度
                    // 仪表盘轴线相关配置
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    1,
                                    {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.6,
                                        r: 0.6,
                                        colorStops: [
                                            {
                                                offset: 0.85,
                                                color: '#031F46', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.93,
                                                color: '#086989', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: '#12D7EF', // 100% 处的颜色
                                            },
                                        ],
                                    },
                                ],
                            ],
                            width: 500,
                        },
                    },
                    /** 分隔线样式*/
                    splitLine: {
                        show: true,
                        length: 12,
                        lineStyle: {
                            width: 3,
                            color: '#12E5FE', // 用颜色渐变函数不起作用
                        },
                    },
                    /** 刻度线*/
                    axisTick: {
                        show: true,
                        splitNumber: 10,
                        lineStyle: {
                            color: '#12E5FE', // 用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: 5,
                    },
                    /** 刻度标签*/
                    axisLabel: {
                        distance: 2,
                        color: '#CEF3FE',
                        show:false
                    },
                    detail: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
                {
                    name: '渐变进度',
                    type: 'gauge',
                    radius: '75%',
                    splitNumber: 12,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    dataArr / dataX,
                                    {
                                        type: 'linear',
                                        x: 0,
                                        y: 1,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: 'rgba(60,207,223,0)', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.9,
                                                color: 'rgba(60,207,223,0.5)', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(60,207,223,0.9)', // 100% 处的颜色
                                            },
                                        ],
                                        global: false, // 缺省为 false
                                    },
                                ],
                            ],
                            width: 30,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    title: {
                        // 标题
                        show: false,
                    },
                    data: [
                        {
                            name: 'title',
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
                {
                    name: '内层带指针',
                    type: 'gauge',
                    radius: '42%',
                    splitNumber: 10, // 刻度数量
                    min: 0, // 最小刻度
                    max: dataX, // 最大刻度
                    // 仪表盘轴线相关配置
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    1,
                                    {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.59,
                                        r: 0.6,
                                        colorStops: [
                                            {
                                                offset: 0.72,
                                                color: '#032046',
                                            },
                                            {
                                                offset: 0.94,
                                                color: '#086989',
                                            },
                                            {
                                                offset: 0.98,
                                                color: '#0FAFCB',
                                            },
                                            {
                                                offset: 1,
                                                color: '#0EA4C1',
                                            },
                                        ],
                                    },
                                ],
                            ],
                            width: 800,
                        },
                    },
                    /** 分隔线样式*/
                    splitLine: {
                        show: false,
                    },
                    /** 刻度线*/
                    axisTick: {
                        show: false,
                    },
                    /** 刻度标签*/
                    axisLabel: {
                        show: false,
                    },
                    /** 仪表盘指针*/
                    pointer: {
                        show: true,
                        length: '92%',
                        width: 4, // 指针粗细
                    },
                    /** 仪表盘指针样式*/
                    itemStyle: {
                        color: '#12E5FF',
                    },
                    data: [
                        {
                            value: dataArr,
                        },
                    ],
                    detail: {
                        show: false,
                    },
                },
            ],
        
        };

        },
        immediate:true,
        deep:true
      }
   }
 }
</script>

<style lang = "scss" scoped>

</style>
